<template>
	<!-- <view class=""> -->

	<view class="contentAll">
		<view class="hello">
			<view class="hello1">
				
				<image @click="open(1)" class="img1" :src="imgUrl1" mode=""></image>
				<!-- <image @click="open(2)" class="img2" :src="imgUrl2" mode=""></image> -->
				<image @click="open(2)" class="img3" :src="imgUrl2" mode=""></image>
				<image @click="open(3)" class="img2" :src="imgUrl3" mode=""></image>
			</view>
			<!-- 	<view class="mengceng1" @click="changeColor" :style="{ background: hasSelectColor}">
			</view>
			<view class="mengceng2" @click="changeColor" :style="{ background: hasSelectColor}">

			</view> -->
			<!-- 	<view class="mengceng3" @click="changeColor" :style="{ background: hasSelectColor}">

			</view> -->
		</view>
		<!-- 		<uni-popup ref="popup" background-color="#fff">
			<scroll-view scroll-top="0" scroll-y="true" class="scroll-X" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">

				<view class="content">
					<view class="swiperItem">
						<HR_swiper @getChild2="getChild2" s_type="swiper3" :s_list="getSwiperList()" :s_current="0">
						</HR_swiper>
					</view>

					<view class="bigImg">
						<image class="bigImgBox" :src="bigImgUrl" @click="changeImg" mode="widthFix"></image>
					</view>
				</view>
			</scroll-view>

		</uni-popup> -->
		<uni-popup ref="popup2">
			<view class="allFloat">
				<view class="inv-h-w">
					<block v-for="(item,index) in items" :key="index">
						<view :class="['inv-h',Inv== index?'inv-h-se':'']" @click="Inv=index">{{item}}</view>
					</block>
					<!--<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">我是选项卡二</view>-->
				</view>
				<view class="float2" >
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
						@scrolltolower="lower" @scroll="scroll">
						<view id="demo1" v-for="(item,index) in getSwiperList()" class="scroll-view-item uni-bg-red">
							<view class="imgBox">
								<image class="imgs" @click="changeImg(item.image) " :src="item.image" mode="aspectFit"></image>
							</view>
						</view>
					
					</scroll-view>
				</view>
			
			</view>
	

		</uni-popup>

		<uni-popup ref="popup1" background-color="#fff">
			<view class="content1">
				<view v-for="(item,index) in colorData" @click="selectColor(item)" class="colorItem"
					:style="{ background: item}">

				</view>
			</view>

		</uni-popup>
	</view>


	<!-- </view> -->
</template>

<script>
	import HR_swiper from "@/uni_modules/hongren-swiper/components/hongren-swiper/hongren-swiper.vue";


	export default {
		data() {
			return {
				Inv: 0,
				items: ['吸油烟机','橱柜', '空调'],
				old: {
					scrollTop: 0
				},
				hasSelectColor: '#0FAEFF',
				colorData: ['#0FAEFF', '#E43D33', '#8F939C', '#18BC37', '#ffffff', '#000000', '#F0AD4E', 'purple'],
				bigImgUrl: '',
				imgUrl1: '../../static/img/2.png',
				
				imgUrl2: '../../static/img/3.jpg',
				imgUrl3: '../../static/img/4.png',
				current: 0,
				swiperList1: [{
						id: 1,
						image: "../../static/img/2.png",
						image1: "/../static/img/2.png",
					},
					{
						id: 2,
						image: "../../static/img/10.png",
						image1: "/../static/img/10.png",
					},


				],
				swiperList3: [
					// {
					// 	id: 1,
					// 	path: "",
					// 	image: "../../static/img/1.jpg",
					// 	image1: "../../../../static/img/1.jpg",
					// },

					{
						id: 2,
						path: "",
						image: "../../static/img/4.png",
						image1: "/../static/img/4.png",
					},
					// {
					// 	id: 3,
					// 	path: "",
					// 	image: "../../static/img/6.jpg",
					// 	image1: "../../../../static/img/6.jpg",
					// },
					// {
					// 	id: 4,
					// 	path: "",
					// 	image: "../../static/img/8.jpg",
					// 	image1: "/../static/img/8.jpg",
					// },
				],
				swiperList2: [{
						id: 1,
						path: "",
						image: "../../static/img/3.jpg",
						image1: "/../static/img/3.jpg",
					},
					{
						id: 1,
						path: "",
						image: "../../static/img/7.jpg",
						image1: "/../static/img/7.jpg",
					},
					// {
					// 	id: 1,
					// 	path: "",
					// 	image: "../../static/img/9.jpg",
					// 	image1: "../../../../static/img/9.jpg",
					// },

				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				pic_url: ''
			}
		},
		components: {
			HR_swiper
		},
		onShow() {

		},

		methods: {

			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			selectColor(item) {
				this.hasSelectColor = item;
				this.$refs.popup1.close()
			},
			getChild1(imgUrl) {
				let tag = 'imgUrl' + this.current
				this[tag] = imgUrl;
				this.$refs.popup.close()
			},
			getChild2(current) {
				console.log(current)
				let tag = 'swiperList' + this.current
				this.bigImgUrl = this[tag][current].image
				// let tag = 'imgUrl' + this.current
				// this[tag] = imgUrl;
				// this.$refs.popup.close()
			},
			open(current) {
				// this.current = current
				// let tag = 'swiperList' + this.current
				// this.bigImgUrl = this[tag][0].image
				// this.$refs.popup.open('top')
				this.Inv = current -1
				this.$refs.popup2.open('left')
			},
			// close() {
			// 	this.$refs.popup.close()
			// },
			getSwiperList() {
				console.log(this.Inv)
				let inv =  this.Inv +1
				let tag = 'swiperList' + inv
                console.log(tag)
				return this[tag]
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			changeImg(imgTag) {
				 let inv = this.Inv+1
				let tag = 'imgUrl' + inv
				this[tag] = imgTag;
				console.log(tag)
				this.$refs.popup2.close()
			},
			changeColor() {
				this.$refs.popup1.open('top')
			},
		},
	}
</script>
<style>
	page {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: scroll;
	}

	* {
		padding: 0;
		margin: 0;
	}
</style>
<style scoped>
	.inv-h-w {
		width: 80rpx;
		/* background-color: rgba(250,250,250,.8); */
		height: 100vh;
		letter-spacing: 10rpx;
	    float: left;
	}
.float2{
	width: 420rpx;
	height: 100vh;
	float: left;
}
.allFloat{
	width: 500rpx;
}
	.inv-h {
		font-size: 32upx;
		flex: 1;
		text-align: center;
		color: #666666;
		height: auto;
		/* line-height: 100upx; */
		
		padding: 20rpx 0;
		position: relative;
		
		font-size: 36rpx;
		font-family: PingFang SC;
		/* font-weight: bold; */
		color: #0FAEFF;
	}

	.inv-h-se {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: white;
		background-color:rgba(15,174,255,.5);
		border-radius: 10rpx;
	}

	/* .inv-h-se:after {
		content: '';
		position: absolute;
		bottom: -2rpx;
		top: auto;
		left: 42%;
		height: 6rpx;
		width: 44rpx;
		background-color: #4DB046;
	} */

	.scroll-Y {
		width: 420rpx;
		padding: 5%;
		height: 90vh;
	}

	.imgBox {
		margin: 3% 0;
		width: 90%;
		height: 400rpx;
		/* margin-left: 5%; */
		background-color: white;
		/* margin:40rpx 0; */
		margin-bottom: 5%;
	}

	.imgs {
		width: 100%;
		height: 100%;
	}

	/deep/ .uni-popup .uni-popup__wrapper.left {
		background-color: rgba(61, 77, 111, .5) !important;
		/* background-color: rgba(250,250,250,.4)!important; */

	}

	.content {
		display: block;
		overflow: hidden;
	}

	.colorItem {
		width: 22vw;
		height: 22vw;
		border-radius: 50%;
		float: left;
		margin-top: 60rpx;
		margin-left: 2.4vw;
		box-shadow: 10rpx 10rpx 10rpx #999;

	}

	.content1 {
		height: 500rpx;
		background: white;
	}

	.mengceng1 {
		width: 215rpx;
		height: 180rpx;
		transform: rotate(-0deg);
		position: absolute;
		bottom: 0rpx;
		opacity: .9;
		left: -120rpx;

	}

	.mengceng2 {
		width: 595rpx;
		height: 235rpx;
		position: absolute;
		bottom: 0rpx;
		left: 100rpx;
		opacity: .9;
	}

	.mengceng3 {
		width: 50rpx;
		height: 200rpx;
		transform: rotate(0deg);
		position: absolute;
		bottom: 0rpx;
		opacity: .9;
		right: 0rpx;

	}

	/* 	.content {
		height: 350rpx;
		overflow: auto;
	} */

	.contentAll {
		width: 100vw;
		height: 100vh;
		overflow: scroll;
		/* overflow: hidden; */
		/* width: 100%; */
		/* height: 100%; */
		/*     width: 100vw;
		height:520vh;
		position: relative; */
		/* 	top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		padding: 0; */
	}



	.hello {
		width: 200%;
		height: 100%;
		position: relative;
		/* 
		/* background: url('') no-repeat; */
		/*  
		/* background-size: 100% 100%; */
		/* top: 50%; */
		/* left: 0; */
		/* margin-top: -280rpx; */

	}

	.hello1 {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-size: 100% 100% !important;
		background-image: url('');
	}

	/* .mainImg {
		position: absolute;
		width: 750rpx;

		top: 0;
		left: 0;
		z-index: 9;
	} */

	.img1 {
		width: 220rpx;
		height: 230rpx;
		position: absolute;
		z-index: 10;
		top: 29%;
		left: 48%;
	}

	.img2 {
		position: absolute;
		z-index: 9;
		width: 260rpx;
		height: 650rpx;
		top: 38%;
		left: 80%;

	}

	.img3 {
		top: 61%;
		left: 63%;
		position: absolute;
		z-index: 10;
		width: 225rpx;
		height: 265rpx;
	}



	.swiperItem {
		position: relative;
		width: 50vw;
		height: 460rpx;

		/* margin-bottom: 100rpx; */
	}

	.bigImg {
		display: inline-block;
		width: 50%;
		float: left;
	}

	/deep/.swiper3_item {
		border-radius: 0 !important;
	}

	/deep/.swiper3 {
		height: 450rpx;
	}

	/deep/.uni-swiper-slides {
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
	}

	.bigImgBox {
		width: 100%;
		margin-top: 20%;
	}
</style>
